<!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>传智学员信息登记表</title>
 </head>
  <style>
  body{font-size: 12px;font-family: "微软雅黑";}    
  body,form,input,h1,p{padding: 0;margin: 0;border: 0;}   
    .bg{
        width: 1111px;
        height: 733px;
        background:url("img/42.jpg") no-repeat;    
        position: relative;                                 
    }
    form{
        width: 600px;
        height: 400px;
        margin: 50px  auto;
        padding-left: 30px;
        position:absolute;
        left: 48%;
        top: 10%;
    }
    h2{
        text-align: center;
        margin: 16px  0;
    }
    p{margin-top: 20px;}
    p span{
        width: 75px;
        display: inline-block;
        text-align: right;
        padding-right: 10px;
    }
    p input{
        width: 200px;
        height: 18px;
        border: 1px  solid  #38a1bf;
        padding: 2px;
    }
    .lucky input{
        widows: 100px;
        height: 24px;
    }
    .bth input{
        width: 100px;
        height: 30px;background: #93b518;
        margin-top: 20px;
        margin-left: 75px;
        border-radius: 3px;
        font-family: "微软雅黑";
        color: #fff;
    }
  </style>
 <body>
 <div class="bg">
   <form action="#" method="get" autocomplete="off">
       <h2>传智学员信息登记表</h2>
       <p><span>用户登录名：</span><input type="text"name="user_name" value="myemail@163.com" disabled readonly />(不能修改，只能查看)</p>
       <p><span>真实姓名：</span><input type="text" name="real_name"pattern="^[\u4e00-\  u9fa5]{0,}$" placeholder="例如：王明"required autofocus/>(必须填写，只能输入汉字)</p>
       <p><span>真实年龄：</span><input type="number" name="real_lage"  value="24" min="15" max="120" required/>(必须填写)</p>
       <p><span>真实年龄：</span><input type="number" name="real_lage"  value="24" min="15" max="120" required/>(必须填写)</p>
       <p><span>出生日期：</span><input type="date" name="birthday"  value="1990-10-1" required/>(必须填写)</p>
       <p><span>电子邮箱：</span><input type="email" name="myemail"  placeholder="123456@126.com" required multiple/>(必须填写)</p>
       <p><span>手机号码：</span><input type="tel" name="card"   required pattern="^\d{8,18}|[0-9x] {8,18}?$"/>(必须填写,能够以数字，字母x结尾的短身份证号码)</p>
       <p><span>个人主页：</span><input type="url" name="myurl"  list="urllist" placeholder="http://www.itcast.cn" pattern="^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=] *)?$" />required/>(请选择网址)</p>
         <datalist id="urllist">
          <option>http://www.itcast.cn</option>
          <option>http://www.boxuegu.com</option>
          <option>http://www.w3school.com</option>
         </datalist>
        </p>
        <p class="lucky"><span>幸运颜色：</span><input type="color"name="lovecolor" value="#fed000"/>(请选择你喜欢的颜色)</p>
         <p class="btn">
          <input type="submit" value="提交"/>
          <input type="reset" value="重置"/>
         </p>
         </form>
    </div>
  </body>

  </html>
